<template>
  <div class="baseNetManage height_100">
    <page-model :title="title">
      <div class="content mb-30">
        <el-upload
          class="uploadContainer mb-25"
          :action="importExcel"
          ref="upload"
          accept=".xlsx,.xls"
          :before-upload="beforeUpload"
          :on-success="onsuccessUpload"
          :with-credentials="true"
          :headers="headOfRequest"
          :show-file-list="false"
        >
        <span class="import">导入</span>
        </el-upload>
        <span @click="exportExcel" class="export">导出</span>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="pointAd" label="测试位置" align="center"></el-table-column>
          <el-table-column label="设备安装前" align="center">
            <el-table-column label="机灵敏度（dBm）" align="center">
              <el-table-column prop="file1" label="移动" width="175" align="center">
                <template slot-scope="scope">
                  <el-input
                    type="number"
                    v-model="scope.row.file1"
                    placeholder="请输入数据"
                    size="small"
                    clearable
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="file2"
                label="电信/联通"
                width="175"
                align="center"
                style="background:white"
              >
                <template slot-scope="scope">
                  <el-input
                    type="number"
                    v-model="scope.row.file2"
                    placeholder="请输入数据"
                    size="small"
                    clearable
                  ></el-input>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="峰值平均功率(dB)@BER=10" align="center">
              <el-table-column prop="file3" label="移动" width="175" align="center">
                <template slot-scope="scope">
                  <el-input
                    type="number"
                    v-model="scope.row.file3"
                    placeholder="请输入数据"
                    size="small"
                    clearable
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="file4" label="电信/联通" width="175" align="center">
                <template slot-scope="scope">
                  <el-input
                    type="number"
                    v-model="scope.row.file4"
                    placeholder="请输入数据"
                    size="small"
                    clearable
                  ></el-input>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table-column>
          <el-table-column label="设备安装后" align="center">
            <el-table-column label="机灵敏度（dBm）" align="center">
              <el-table-column prop="file5" label="移动" width="175" align="center">
                <template slot-scope="scope">
                  <el-input
                    type="number"
                    v-model="scope.row.file5"
                    placeholder="请输入数据"
                    size="small"
                    clearable
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="file6" label="电信/联通" width="175" align="center">
                <template slot-scope="scope">
                  <el-input
                    type="number"
                    v-model="scope.row.file6"
                    placeholder="请输入数据"
                    size="small"
                    clearable
                  ></el-input>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="峰值平均功率(dB)@BER=10" align="center">
              <el-table-column prop="file7" label="移动" width="175" align="center">
                <template slot-scope="scope">
                  <el-input
                    type="number"
                    v-model="scope.row.file7"
                    placeholder="请输入数据"
                    size="small"
                    clearable
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="file8" label="电信/联通" width="175" align="center">
                <template slot-scope="scope">
                  <el-input
                    type="number"
                    v-model="scope.row.file8"
                    placeholder="请输入数据"
                    size="small"
                    clearable
                  ></el-input>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table>
        <div class="addBtn mt-30">
          <span class="confirm flex-center" @click="confirmAdd">保存</span>
        </div>
      </div>
    </page-model>
  </div>
</template>

<script>
import { getProjectId } from '@/utils/projectId'
import { getToken } from '@/utils/token'
import {
  importExcel,
  exportExcel,
  save5GBase
} from '@/api/innerProject/5gNetManage'
export default {
  data () {
    return {
      headOfRequest: { token: getToken() },
      importExcel: importExcel + '?projectId=' + getProjectId(),
      title: '5G基站管理',
      // tableData: [],
      save5GBaseDTO: {
        projectId: '',
        tbLightList: [
          {
            channe: '',
            createTime: '',
            device: '',
            frequency: '',
            isValid: '',
            lightId: '',
            lightUrl: '',
            projectId: '',
            rssi: '',
            ssid: '',
            updateTime: ''
          }
        ],
        tbPointList: [
          {
            createTime: '',
            file1: '',
            file2: '',
            file3: '',
            file4: '',
            file5: '',
            file6: '',
            file7: '',
            file8: '',
            isValid: '',
            pointAd: '',
            pointId: '',
            projectId: '',
            updateTime: ''
          }
        ]
      }
    }
  },
  computed: {
    tableData () {
      return this.$store.state.projectManage.baseNetDTO
    }
  },
  created () {
    if (getProjectId()) {
      this.$store.dispatch('projectManage/baseNetList')
    }
  },
  methods: {
    // 上传之前的钩子
    beforeUpload (file) {
      this.file = file
      this.fileName = file.name
      this.fileSize = file.size
      const reader = new FileReader()
      reader.readAsDataURL(file)
      const that = this
      reader.onload = function () {
        that.fileData = reader.result
      }
    },
    // 上传成功
    async onsuccessUpload (response, file, fileList) {
      if (response.code === 200) {
        // console.log('response.data.data', response.data)
        this.$store.state.projectManage.baseNetDTO = response.data
      } else {
        this.$message({
          message: response.message,
          type: 'error',
          duration: 500
        })
      }
    },
    exportExcel () {
      exportExcel(getProjectId()).then((res) => {
        // console.log('res', res)
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) // res就是接口返回的文件流了
        // console.log('blob', blob)
        // const objectUrl = URL.createObjectURL(blob)
        // window.location.href = objectUrl
        if ('download' in document.createElement('a')) {
          // 支持a标签download的浏览器
          // 非IE下载
          const link = document.createElement('a') // 创建a标签
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          link.download = 'catagory.xls' // a标签添加属性
          document.body.appendChild(link)
          link.click() // 执行下载
          URL.revokeObjectURL(link.href) // 释放URL 对象
          document.body.removeChild(link) // 释放标签
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob)
        }
      })
    },
    confirmAdd () {
      this.save5GBaseDTO.tbPointList = this.tableData
      this.save5GBaseDTO.projectId = localStorage.getItem('projectId')
      // console.log('this.save5GBaseDTO', this.save5GBaseDTO)
      save5GBase(this.save5GBaseDTO).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            message: '添加成功',
            type: 'success',
            duration: 500
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  background-color: #fff;
  min-height: calc(100% - 90px);
  padding: 30px;
  .uploadContainer {
    display: inline-block;
    width: 120px;
    .import {
      display: inline-block;
      width: 108px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      background: rgba(72, 104, 255, 1);
      border-radius: 21px;
      font-size:16px;
      color:rgba(255,255,255,1);
    }
  }
  .export {
    display: inline-block;
    text-align: center;
    margin-left: 10px;
    width: 108px;
    height: 42px;
    font-size:16px;
    line-height: 42px;
    color:rgba(72,104,255,1);
    border-radius: 21px;
    border:2px solid rgba(72,104,255,1);
  }
  .addBtn {
    padding-left: 300px;
    .confirm {
      width: 172px;
      height: 48px;
      background: rgba(72, 104, 255, 1);
      border-radius: 24px;
      font-size:16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      cursor: pointer;
    }
  }
  ::v-deep .el-table thead {
    color: #333333;
    //font-size:16px;
    tr:nth-child(1) {
      th:nth-child(1) {
        background-color: #ffffff;
      }
    }
    tr:nth-child(2) {
      th {
        background-color: #ffffff;
      }
    }
  }
  ::v-deep .el-input--small .el-input__inner {
    height: 0.26667rem;
    line-height: 0.26667rem;
    text-align: center;
  }
}
</style>
